<template>
  <div class="root">
    <navigationBar/>
    <div class="context">
      <table class="preview">
        <tr >
          <td rowspan="5">
            <img class="pimg" :src="productData.pimgLink" alt="product Image"/>
          </td>
          <td class="pdec" colspan="2">{{ productData.pdec }}</td>
        </tr>
        <tr>
          <td class="key-col">收货人:</td>
          <td class="value-col">{{ consigneeList[seq].consigneeName }}</td>
        </tr>
        <tr>
          <td class="key-col">联系方式:</td>
          <td class="value-col">{{ consigneeList[seq].consigneePhone }}</td>
        </tr>
        <tr>
          <td class="key-col">地址:</td>
          <td class="value-col">{{ consigneeList[seq].consigneeAddress }}</td>
        </tr>
        <tr>
          <td class="key-col">实付价格:</td>
          <td class="value-col">{{ productData.pprice }}</td>
        </tr>
      </table>
      <div class="enter-button" @click="createNewOrder">提交订单</div>
      <div class="link-button" @click="showConsigneeList(true)">收获地址有误？添加收货人</div>
    </div>
    <consigneeList :visible="consigneeListVisible" :consigneeL="consigneeList" :pid_tmp="pid" :index="index" :cid="consigneeList[index].cid"></consigneeList>
    <newConsignee :visible="newConsigneeVisible"></newConsignee>
  </div>
</template>

<script>
import axios from 'axios'
import consigneeList from './ConsigneeList.vue'
import newConsignee from './NewConsignee.vue'

export default{
  components: {
    consigneeList,
    newConsignee
  },
  name: 'NewOrder',
  data(){
    return {
      pid: this.$route.query.pid,
      productData: Object,
      consigneeList: [],
      seq: 0,
      index: 0,
      otherConsignee: this.$route.query.cid,
      consigneeListVisible: false,
      newConsigneeVisible: false
    }
  },

  methods: {
    showConsigneeList(show) {
      if(!show){
        this.consigneeListVisible = show
      } else {
        let index = this.seq
        var setShow = async () => { this.consigneeListVisible = show }
        setShow().then(() => {
          if(show && document.getElementById('consignee-container')) {
            document.getElementById('consignee-container').children.item(index).classList.add('selected')
          }
        })
      }
    },
    showNewConsignee(show) {
      this.newConsigneeVisible = show
    },
    changeConsignee(index) {
      this.seq = index
    },
    createNewOrder() {
      if(this.consigneeList[this.seq].cid === -1) {
        window.alert('请选择收货人')
        return
      }
      axios.post(this.globalData.apiURL + '/order/new', {
        pid: this.productData.pid,
        cid: this.consigneeList[this.seq].cid,
        price: this.productData.pprice
      }, {
        headers: {
          Authorization: this.globalData.User.Token
        }
      })
        .then(res => {
          console.log(res)
          this.$router.push('./orderdetail?oid=' + res.data);
          // this.$router.push('./detail?pid=' + this.productData.pid);
        })
        .catch(error => {
          console.log(error)
        })
    },
    loadConsigneeList() {
      if(this.otherConsignee != null) {
        axios.get(this.globalData.apiURL + '/consignee/consigneebycid?cid=' + this.otherConsignee, {
          headers: {
            Authorization: this.globalData.User.Token
          }
        })
          .then((res) => {
            console.log(res.data)
            this.consigneeList.push(res.data)
          })
          .catch(error => {
            console.log(error)
          })
      } else {
        axios.get(this.globalData.apiURL + '/consignee/consigneeList', {
          headers: {
            Authorization: this.globalData.User.Token
          }
        })
          .then((res) => {
            console.log(res)
            console.log(res.data.length)
            if(res.data.length === 0) {
              console.log('empty consignee')
              this.showNewConsignee(true)
            } else {
              this.consigneeList = res.data
            }
          })
          .catch(error => {
            console.log(error)
          })
      }
    }
  },
  // beforeCreate() {
  //   this.globalData.User.loadInfo()
  //   console.log('create')
  //   // this.loadConsigneeList()
  // },
  created() {
    this.globalData.User.loadInfo()
    console.log('create')
  },
  beforeMount() {
    // 检查登录态
    this.consigneeList = new Array({
      consigneeName: '',
      consigneePhone: '',
      consigneeAddress: '',
      cid: -1
    })
    console.log('before mount')
    if(this.globalData.User.Token === '' || this.globalData.User.Token === null) {
      this.$router.push({name: 'Connect'})
    }

    // 加载商品信息
    axios.get(this.globalData.apiURL + '/product/previewbypid?pid=' + this.pid)
      .then((res) => {
        this.productData = res.data
      })
      .catch(error => {
        console.log(error)
      })

    // 加载收货人信息
    this.loadConsigneeList()
    console.log('before mount end')
  },
  mounted() {
    let self = this
    this.$nextTick(function() {
      document.addEventListener('keyup', function(e) {
        if(e.keyCode === 27) {
          if(self.newConsigneeVisible){
            self.newConsigneeVisible = false
          } else {
            self.consigneeListVisible = false
          }
        }
      })
    })
  }
}

</script>

<style scoped>
.root {
  text-align: center;
}
.context {
  margin: 0 auto;
  width: 80vw;
  margin-top: 55px;
}
.consignee {
    border-radius: 12px;
    /*box-sizing: border-box;*/
    border: 3px solid rgb(20, 20, 20);
    cursor: pointer;
    margin: 10px;
    padding: 3px 0 2px 5px;
}
.consignee span {
  padding: 0 5px;
}
.pimg {
  height: 35vh;
}
.pdec {
  font-weight: 800;
  text-align: justify;
}

.key-col {
  width: 20%;
  text-align: right;
}
.value-col {
  text-align: left;
}

.enter-button {
  user-select: none;
  color: rgb(240, 246, 255);
  font-style: normal;
  font-size: large;
  font-weight: 1000;
  padding: 10px 30px;
  border-radius: 10px;
  background: linear-gradient(90deg, #0022ff, #002ead);
}

.link-button {
  margin-top: 10px;
  user-select: none;
  color:rgb(8, 0, 128);
  font-size: small;
}

</style>
